<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        background-color: #eee;
      }
      /* * {
        border: 1px solid black;
      } */
      .flex {
        display: flex;
      }
      .baiSe {
        background-color: #fff;
        box-shadow: rgb(0 0 0 /20%) 0 2px 1px -1px;
      }
      .flex1 {
        flex: 1;
      }
      /* a1 */
      .column {
        flex-direction: column;
      }
      .mg {
        margin: 3px;
      }
      .mgr8 {
        margin-right: 8px;
      }
      .mgt8 {
        margin-top: 8px;
      }
      @media (max-width: 750px) {
        .hengXiang {
          flex-direction: column;
        }
        .height {
          height: 200px !important;
        }
      }
    </style>
  </head>
  <body class="flex">
    <!-- 侧边栏 -->
    <div style="width: 200px" class="baiSe"></div>
    <!-- 主区域 a1.1-->
    <div class="flex flex1 column">
      <!-- 头部区 -->
      <div style="height: 60px" class="baiSe"></div>
      <!-- 内容区 -->
      <div class="flex1 flex" style="overflow: auto">
        <!-- zuo -->
        <div class="flex column mg" style="flex: 3">
          <!-- 数据区 -->
          <div class="flex hengXiang">
            <!-- 数据块 -->
            <div class="flex1 mgr8 baiSe" style="height: 100px"></div>
            <div class="flex1 mgr8 baiSe" style="height: 100px"></div>
            <div class="flex1 mgr8 baiSe" style="height: 100px"></div>
            <div class="flex1 baiSe" style="height: 100px"></div>
          </div>
          <!-- 列表区 -->
          <div class="">
            <div class="baiSe mgt8 height" style="height: 160px"></div>
            <div class="baiSe mgt8 height" style="height: 160px"></div>
            <div class="baiSe mgt8 height" style="height: 160px"></div>
            <div class="baiSe mgt8 height" style="height: 160px"></div>
            <div class="baiSe mgt8 height" style="height: 160px"></div>
          </div>
        </div>
        <!-- 右 -->
        <div class="flex column mar8 mgt8" style="flex: 1">
          <!-- 提示 -->
          <div class="baiSe" style="height: 150px"></div>
          <!-- 消息区 -->
          <div class="baiSe mgt8" style="height: 300px"></div>
        </div>
      </div>
    </div>
  </body>
</html>
